<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象方法</title>
    <style>
        .表框1, .表框2, .表框3 {
            width: 300px; /* 宽高 */
            height: 40px;
            border: 1px solid pink; /* 边框线 */
            text-align: center; /* 文字水平居中 */
            line-height: 40px; /* 行高, 效果文字垂直居中 */
        }
    </style>
</head>
<body>
<h3>日期对象方法</h3>
<p>使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式</p>
<pre style="font-size: 20px;">
    方法          作用               说明
getFullYear() 获得年份           获取四位年份
getMonth()    获得月份           取值为 0 ~ 11 (注意: 取值+1 才是正确的月份, 因为0是 1月份......)
getDate()     获取月份中的每一日  不同月份取值也不相同
getDay()      获取星期           取值为 0 ~ 6 (0 是星期天)
getHours()    获取小时           取值为 0 ~ 23
getMinutes()  获取分钟           取值为 0 ~ 59
getSeconds()  获取秒             取值为 0 ~ 5
</pre>
<hr>

<!--
案例
需求：将当前时间以：YYYY-MM-DD HH:mm 形式显示在页面 2008-08-08 08:08
分析：
①：调用日期对象方法进行转换
②：记得数字要补0
③：字符串拼接后，通过 innerText 给 标签
-->
<p class="当前日期显示"></p>
<div class="表框1"></div>
<div class="表框2"></div>
<div class="表框3"></div>


<script>
    // 声明时间对象
    const 当前时间 = new Date()
    console.log(`年份: ${当前时间.getFullYear()}`) // 显示年份
    console.log(`月份: ${当前时间.getMonth() + 1}`) // 显示月份, 这里注意要 值+1, 才是正确的月份
    console.log(`日: ${当前时间.getDate()}`) // 显示日
    console.log(`星期: ${当前时间.getDay()}`) // 显示星期

    // 案例
    // 获取DOM元素
    function 显示当前日期() {
        // 日期对象
        const 当前日期显示 = new Date()
        // 分别取值
        let 年 = 当前日期显示.getFullYear()
        let 月 = 当前日期显示.getMonth() + 1
        let 日 = 当前日期显示.getDate()
        let 星期 = 当前日期显示.getDay()
        let 时 = 当前日期显示.getHours()
        let 分 = 当前日期显示.getMinutes()
        let 秒 = 当前日期显示.getSeconds()
        // 如果是个位数的, 就在前面补0
        if (时 <= 9) {
            时 = '0' + 时
        }
        if (分 <= 9) {
            分 = '0' + 分
        }
        if (秒 <= 9) {
            秒 = '0' + 秒
        }
        // 函数返回值
        return `${年}年 ${月} 月${日}日 星期${星期} ${时}:${分}:${秒}`
    }


    const 当前日期显示 = document.querySelector('.当前日期显示')
    当前日期显示.innerHTML = `现在日期是: ${显示当前日期()}` //调用函数,提取返回值

    const 表框1 = document.querySelector('.表框1')
    // 定时器由于要停顿一秒在执行，所以这里先执行一次,然后定时器在直执行，这样可以实现无缝连接。
    表框1.innerHTML = 显示当前日期()
    setInterval(function () { // 定时器
        表框1.innerHTML = 显示当前日期() // 调用函数
    }, 1000)


    // -------- 除了上面繁琐的写法，其实还有一个更简便的写法。 --------

    // 日期对象.innerHTML = date.toLocaleString()  // 2022/4/1 09:41:21
    // 日期对象.innerHTML = date.toLocaleDateString()  // 2022/4/1
    // 日期对象.innerHTML = date.toLocaleTimeString()  // 2022/4/1

    const 表框2 = document.querySelector('.表框2')
    表框2.innerHTML = 当前时间.toLocaleString() // 格式化输出端一种方法, 12小时制格式

    const 表框3 = document.querySelector('.表框3')
    表框3.innerHTML = 当前时间.toLocaleString('chinese', {hour12: false}) // 24小时制格式

    setInterval(function () { // 定时器
        const 当前时间 = new Date() // 在声明日期对象,作用域
        表框2.innerHTML = 当前时间.toLocaleString()
        表框3.innerHTML = 当前时间.toLocaleString('chinese', {hour12: false})
    }, 1000)


    // 返回星期的方法 getDay(), 返回值是0 ~ 6, 不符号习惯.  注意0代表 星期天,所以第一个元素要 '星期天'
    const 数组_星期 = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    console.log(数组_星期[new Date().getDay()]) // [] 是数组下标, 这里返回值作为数组的下标 读取相应的值
</script>


</body>
</html>